<template>
	<view>
		<!-- 按钮 -->
		<tm-card title="卡片" content="内容" :action="['清除主题']" @action-click=cardBtn>
			<template v-slot:content="{text}">
				<view>
					<view class="pa-12 text-size-s text-weight-b blue text mb-32 ">内置暗黑/亮色模式切换</view>
					<tm-button @click="model(arg)">切换模式</tm-button>
				</view>
			</template>
		</tm-card>
		<tm-button @click="vk.navigateTo('/pages/z-pagin-dome/z-pagin-dome')">体验z-ping-dome</tm-button>
		<tm-button @click="vk.navigateTo('/pages_template/uni-id/login/index/index')">登录页</tm-button>
		<tm-button @click="exitLogin">退出登陆</tm-button>
		<tm-button @click="vk.navigateTo('/pages/index/themechange')">切换主题</tm-button>
		<tm-button theme="indigo" size="n" @click="vk.navigateTo('/pages_template/db-test/db-test')">vk数据库操作示例
		</tm-button>
		<tm-button theme="indigo" size="n" @click="vk.navigateTo('/pages_template/vk-vuex/vk-vuex')">vk.getVuex示例
		</tm-button>
		<tm-button theme="indigo" size="n" @click="vk.navigateTo('/pages_template/uni-id/login/index/index')">vk登陆窗口
		</tm-button>
		<!-- 日历 -->
		<tm-calendar>
			<tm-button>打开日历</tm-button>
		</tm-calendar>
		<!-- 老虎机 -->
		<tm-choujiangGame></tm-choujiangGame>
		<!-- 表单演示 -->
		<view>
			<tm-form @submit="submit" ref="formData" @request="success" method="post">
				<tm-input name="title" required title="标题" v-model="reqData.title"></tm-input>
				<tm-input name="price" required title="价格" input-type="digit" v-model="reqData.price" suffix="万">
				</tm-input>
				<tm-button navtie-type="form">提交数据</tm-button>
			</tm-form>
		</view>

	</view>
</template>


<script>
	export default {
		data() {
			// 页面数据变量
			return {
				// init请求返回的数据
				reqData: {
					title: 6666,
					price: 1111
				},
				show: false,
				arg: false,
				actions: [{
					text: '默认',
					color: 'primary'
				}, {
					text: '天空蓝',
					color: 'blue'
				}, {
					text: '青春绿',
					color: 'green'
				}, {
					text: '靛蓝天',
					color: 'indigo'
				}, {
					text: '活力橙',
					color: 'orange'
				}, {
					text: '猛男粉',
					color: 'pink'
				}, {
					text: '开门红',
					color: 'red'
				}, {
					text: '柠檬黄',
					color: 'yellow'
				}],
				// 表单请求数据
				form1: {

				},
				scrollTop: 0,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			this.options = options;
			// this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			console.log('---------------------获取当前主题-------------------------------');
			console.log('获取当前主题', this.$tm.theme.getTheme());
			console.log('---------------------这是执行vkVuex-------------------------------');
			console.log('这是执行vkVuex', vk.getVuex('$app.config.color.main'));
			console.log('----------------------这是执行this.$tm.vx------------------------------');
			console.log('这是执行this.$tm.vx', this.$tm.vx.state());
			console.log('--------------------这是执行tm内置函数--------------------------------');
			console.log('这是执行tm内置函数', this.$tm.test.password2('123a')); //返回false,不通过
			console.log('----------------------------------------------------');
			// promise方式
			vk.callFunction({
				url: 'client/user/pub/test',
			}).then(res => {
				console.log('----------------------------------------------------');
				console.log(res);
				console.log('----------------------------------------------------');
			}).catch(res => {

			})
			console.log('----------------------------------------------------');

			console.log(this.$store);
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {

		},
		// 监听 - 页面触底部
		onReachBottom() {

		},
		// 监听 - 窗口尺寸变化(仅限:App、微信小程序)
		onResize() {

		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {

		},
		// 监听 - 页面创建时
		created() {

		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {

			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 默认暗黑/亮色模式 主题切换
			model(arg) {
				arg ? this.arg = false : this.arg = true
				this.$tm.theme.setBlack(this.arg)
			},
			change(e) {
				this.$tm.theme.setTheme(e.data.color);
			},
			cardBtn(e) {
				switch (e) {
					case 0:
						this.$tm.theme.clear()
						break;
					default:
						break;
				}
			}
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>


</style>
